<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉字魔法王国 - 500常用字象形学习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #FFF9E6 0%, #E6F3FF 50%, #FFF0F5 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            animation: bounce 2s infinite;
        }

        .title {
            font-size: 3rem;
            color: #FF69B4;
            text-shadow: 3px 3px 0px #FFB6C1;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1.5rem;
            color: #9370DB;
            margin-bottom: 20px;
        }

        .game-area {
            background: white;
            border-radius: 30px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        .game-modes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .game-card {
            background: linear-gradient(135deg, #FFB6C1 0%, #DDA0DD 100%);
            border-radius: 25px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .game-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }

        .game-card h3 {
            font-size: 1.8rem;
            color: white;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .game-card p {
            font-size: 1.1rem;
            color: white;
            opacity: 0.9;
        }

        .game-card::after {
            content: '🌟';
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 2rem;
            animation: twinkle 1.5s infinite;
        }

        .hanzi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 20px;
            margin: 20px 0;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .hanzi-card {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #FFE4B5 0%, #FFDEAD 100%);
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .hanzi-card:hover {
            transform: scale(1.1) rotate(3deg);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .hanzi-card.correct {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%) !important;
            animation: correctPulse 0.6s ease;
        }

        .hanzi-card.wrong {
            background: linear-gradient(135deg, #FF5252 0%, #FF7043 100%) !important;
            animation: shake 0.5s ease;
        }

        .hanzi-card.highlight {
            background: linear-gradient(135deg, #FFD700 0%, #FFA726 100%) !important;
            animation: glow 1s infinite alternate;
        }

        .hanzi {
            font-size: 3rem;
            font-weight: bold;
            color: #8B4513;
            margin-bottom: 5px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }

        .pinyin {
            font-size: 1.2rem;
            color: #CD853F;
            font-weight: bold;
        }

        .meaning {
            font-size: 1rem;
            color: #FF6347;
            margin-top: 5px;
        }

        .pictogram {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .character-display {
            background: linear-gradient(135deg, #FFE4E1 0%, #FFF0F5 100%);
            border-radius: 25px;
            padding: 40px;
            text-align: center;
            margin: 20px 0;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .big-hanzi {
            font-size: 5rem;
            font-weight: bold;
            color: #FF6347;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .big-pinyin {
            font-size: 2.5rem;
            color: #32CD32;
            margin: 10px 0;
        }

        .big-meaning {
            font-size: 1.8rem;
            color: #9370DB;
            margin: 10px 0;
        }

        .pictogram-evolution {
            font-size: 3rem;
            margin: 20px 0;
            animation: pulse 2s infinite;
        }

        .controls {
            text-align: center;
            margin: 20px 0;
        }

        .btn {
            font-size: 1.3rem;
            padding: 15px 30px;
            margin: 10px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn-primary {
            background: linear-gradient(135deg, #FF69B4 0%, #FF1493 100%);
            color: white;
        }

        .btn-success {
            background: linear-gradient(135deg, #32CD32 0%, #228B22 100%);
            color: white;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .score-board {
            background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
            border-radius: 25px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #FF69B4, #FF1493);
            transition: width 0.5s ease;
            border-radius: 10px;
        }

        .instructions {
            background: #FFF0F5;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 5px solid #FF69B4;
        }

        .instructions h4 {
            color: #FF6347;
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .instructions p {
            color: #32CD32;
            font-size: 1.2rem;
            line-height: 1.6;
        }

        .category-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .tab {
            padding: 10px 20px;
            background: #FFE4B5;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            color: #8B4513;
        }

        .tab.active {
            background: #FF69B4;
            color: white;
        }

        .matching-hanzi {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 20px 0;
        }

        .hanzi-pool, .meaning-pool {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .character-card {
            aspect-ratio: 1;
            background: white;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .character-card:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .character-card.matched {
            background: #4CAF50;
            transform: scale(0.9);
            cursor: default;
        }

        .character-card.selected {
            background: #FFD700;
            transform: scale(1.1);
        }

        .meaning-card {
            aspect-ratio: 1;
            background: white;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            text-align: center;
            padding: 10px;
        }

        .meaning-card:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .meaning-card.matched {
            background: #4CAF50;
            transform: scale(0.9);
            cursor: default;
        }

        .meaning-card.selected {
            background: #FFD700;
            transform: scale(1.1);
        }

        .celebration {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }

        .star {
            position: absolute;
            font-size: 2rem;
            animation: fall 3s linear forwards;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        @keyframes correctPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        @keyframes glow {
            from { box-shadow: 0 0 10px #FFD700; }
            to { box-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700; }
        }

        @keyframes twinkle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        @media (max-width: 768px) {
            .title {
                font-size: 2rem;
            }
            
            .matching-hanzi {
                grid-template-columns: 1fr;
            }
            
            .hanzi {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="title">🌸 汉字魔法王国 🌸</h1>
            <p class="subtitle">和可爱的小动物一起探索500个常用汉字的奥秘！</p>
        </div>

        <div class="score-board">
            <div>🌟 智慧星星: <span id="score">0</span> 颗</div>
            <div class="progress-bar">
                <div class="progress-fill" id="progress" style="width: 0%"></div>
            </div>
        </div>

        <div class="game-area">
            <div id="game-selection">
                <h2 style="text-align: center; color: #FF69B4; margin-bottom: 20px;">选择你喜欢的汉字游戏吧！</h2>
                <div class="game-modes">
                    <div class="game-card" onclick="startGame('pictogram')">
                        <h3>🖼️ 象形文字</h3>
                        <p>看图画学汉字，了解汉字起源</p>
                    </div>
                    <div class="game-card" onclick="startGame('categories')">
                        <h3>📚 分类学习</h3>
                        <p>按主题学习常用汉字</p>
                    </div>
                    <div class="game-card" onclick="startGame('matching')">
                        <h3>🎯 汉字配对</h3>
                        <p>把汉字和意思连起来</p>
                    </div>
                    <div class="game-card" onclick="startGame('story')">
                        <h3>📖 汉字故事</h3>
                        <p>通过故事学习汉字</p>
                    </div>
                </div>
            </div>

            <div id="game-instructions" style="display: none;">
                <div class="instructions">
                    <h4 id="instruction-title">游戏说明</h4>
                    <p id="instruction-text">点击开始游戏吧！</p>
                </div>
            </div>

            <div id="character-display" style="display: none;">
                <div class="character-display">
                    <div class="pictogram-evolution" id="pictogram-evolution">🌳</div>
                    <div class="big-hanzi" id="current-hanzi">木</div>
                    <div class="big-pinyin" id="current-pinyin">mù</div>
                    <div class="big-meaning" id="current-meaning">树木</div>
                </div>
            </div>

            <div id="category-tabs" class="category-tabs" style="display: none;">
                <div class="tab active" onclick="switchCategory('animals')">🐾 动物</div>
                <div class="tab" onclick="switchCategory('nature')">🌳 自然</div>
                <div class="tab" onclick="switchCategory('family')">👨‍👩‍👧‍👦 家庭</div>
                <div class="tab" onclick="switchCategory('food')">🍎 食物</div>
                <div class="tab" onclick="switchCategory('body')">👋 身体</div>
            </div>

            <div id="hanzi-grid" class="hanzi-grid" style="display: none;"></div>
            
            <div id="matching-hanzi" class="matching-hanzi" style="display: none;">
                <div>
                    <h3 style="text-align: center; color: #FF69B4;">汉字</h3>
                    <div class="hanzi-pool" id="hanzi-pool"></div>
                </div>
                <div>
                    <h3 style="text-align: center; color: #FF69B4;">意思</h3>
                    <div class="meaning-pool" id="meaning-pool"></div>
                </div>
            </div>

            <div class="controls">
                <button class="btn btn-primary" onclick="startGame(currentGame)" id="start-btn">开始游戏</button>
                <button class="btn btn-success" onclick="backToMenu()" style="display: none;" id="back-btn">返回菜单</button>
                <button class="btn" onclick="nextCharacter()" style="display: none;" id="next-btn">下一个</button>
            </div>
        </div>
    </div>

    <div class="celebration" id="celebration"></div>

    <script>
        let currentGame = null;
        let score = 0;
        let currentIndex = 0;
        let selectedCard = null;
        let matchedPairs = 0;
        let currentCategory = 'animals';
        let matchingData = [];

        // 500个常用汉字数据（按类别分组）
        const hanziData = {
            animals: [
                { hanzi: '马', pinyin: 'mǎ', meaning: '马', pictogram: '🐴', evolution: '馬→马', story: '四条腿的动物' },
                { hanzi: '鸟', pinyin: 'niǎo', meaning: '鸟', pictogram: '🐦', evolution: '鳥→鸟', story: '有翅膀的小动物' },
                { hanzi: '鱼', pinyin: 'yú', meaning: '鱼', pictogram: '🐟', evolution: '魚→鱼', story: '水中游的动物' },
                { hanzi: '狗', pinyin: 'gǒu', meaning: '狗', pictogram: '🐕', evolution: '犬→狗', story: '人类的好朋友' },
                { hanzi: '猫', pinyin: 'māo', meaning: '猫', pictogram: '🐱', evolution: '貓→猫', story: '可爱的小动物' },
                { hanzi: '牛', pinyin: 'niú', meaning: '牛', pictogram: '🐄', evolution: '牛', story: '耕田的大动物' },
                { hanzi: '羊', pinyin: 'yáng', meaning: '羊', pictogram: '🐑', evolution: '羊', story: '温顺的小动物' },
                { hanzi: '虎', pinyin: 'hǔ', meaning: '老虎', pictogram: '🐅', evolution: '虎', story: '森林之王' }
            ],
            nature: [
                { hanzi: '日', pinyin: 'rì', meaning: '太阳', pictogram: '☀️', evolution: '日', story: '天上的大火球' },
                { hanzi: '月', pinyin: 'yuè', meaning: '月亮', pictogram: '🌙', evolution: '月', story: '夜里的明灯' },
                { hanzi: '山', pinyin: 'shān', meaning: '大山', pictogram: '⛰️', evolution: '山', story: '高高的山峰' },
                { hanzi: '水', pinyin: 'shuǐ', meaning: '水', pictogram: '💧', evolution: '水', story: '生命之源' },
                { hanzi: '火', pinyin: 'huǒ', meaning: '火', pictogram: '🔥', evolution: '火', story: '温暖的火焰' },
                { hanzi: '木', pinyin: 'mù', meaning: '树木', pictogram: '🌳', evolution: '木', story: '绿色的大树' },
                { hanzi: '花', pinyin: 'huā', meaning: '花朵', pictogram: '🌸', evolution: '花', story: '美丽的植物' },
                { hanzi: '草', pinyin: 'cǎo', meaning: '小草', pictogram: '🌿', evolution: '草', story: '绿色的小植物' }
            ],
            family: [
                { hanzi: '爸', pinyin: 'bà', meaning: '爸爸', pictogram: '👨', evolution: '父→爸', story: '亲爱的爸爸' },
                { hanzi: '妈', pinyin: 'mā', meaning: '妈妈', pictogram: '👩', evolution: '母→妈', story: '温柔的妈妈' },
                { hanzi: '哥', pinyin: 'gē', meaning: '哥哥', pictogram: '👦', evolution: '哥', story: '年长的男孩' },
                { hanzi: '姐', pinyin: 'jiě', meaning: '姐姐', pictogram: '👧', evolution: '姐', story: '年长的女孩' },
                { hanzi: '弟', pinyin: 'dì', meaning: '弟弟', pictogram: '👶', evolution: '弟', story: '年幼的男孩' },
                { hanzi: '妹', pinyin: 'mèi', meaning: '妹妹', pictogram: '👧', evolution: '妹', story: '年幼的女孩' },
                { hanzi: '家', pinyin: 'jiā', meaning: '家庭', pictogram: '🏠', evolution: '家', story: '温暖的家' },
                { hanzi: '爱', pinyin: 'ài', meaning: '爱', pictogram: '❤️', evolution: '愛→爱', story: '心中的爱' }
            ],
            food: [
                { hanzi: '米', pinyin: 'mǐ', meaning: '米饭', pictogram: '🍚', evolution: '米', story: '白白的米饭' },
                { hanzi: '面', pinyin: 'miàn', meaning: '面条', pictogram: '🍜', evolution: '面', story: '长长的面条' },
                { hanzi: '肉', pinyin: 'ròu', meaning: '肉', pictogram: '🥩', evolution: '肉', story: '好吃的肉肉' },
                { hanzi: '菜', pinyin: 'cài', meaning: '蔬菜', pictogram: '🥬', evolution: '菜', story: '绿色的蔬菜' },
                { hanzi: '果', pinyin: 'guǒ', meaning: '水果', pictogram: '🍎', evolution: '果', story: '甜甜的水果' },
                { hanzi: '水', pinyin: 'shuǐ', meaning: '水', pictogram: '💧', evolution: '水', story: '清清的水' },
                { hanzi: '茶', pinyin: 'chá', meaning: '茶', pictogram: '🍵', evolution: '茶', story: '香香的茶' },
                { hanzi: '饭', pinyin: 'fàn', meaning: '饭', pictogram: '🍚', evolution: '飯→饭', story: '香喷喷的饭' }
            ],
            body: [
                { hanzi: '头', pinyin: 'tóu', meaning: '头', pictogram: '😊', evolution: '頭→头', story: '聪明的脑袋' },
                { hanzi: '手', pinyin: 'shǒu', meaning: '手', pictogram: '✋', evolution: '手', story: '灵巧的小手' },
                { hanzi: '足', pinyin: 'zú', meaning: '脚', pictogram: '👣', evolution: '足', story: '走路的脚' },
                { hanzi: '眼', pinyin: 'yǎn', meaning: '眼睛', pictogram: '👁️', evolution: '眼', story: '明亮的眼睛' },
                { hanzi: '耳', pinyin: 'ěr', meaning: '耳朵', pictogram: '👂', evolution: '耳', story: '听话的耳朵' },
                { hanzi: '口', pinyin: 'kǒu', meaning: '嘴巴', pictogram: '👄', evolution: '口', story: '说话的嘴巴' },
                { hanzi: '心', pinyin: 'xīn', meaning: '心', pictogram: '❤️', evolution: '心', story: '善良的心' },
                { hanzi: '身', pinyin: 'shēn', meaning: '身体', pictogram: '🧍', evolution: '身', story: '健康的身体' }
            ]
        };

        // 音效系统
        const sounds = {
            correct: new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT'),
            wrong: new Audio('data:audio/wav;base64,UklGRuICAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YcACAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT')
        };

        function playSound(type) {
            try {
                sounds[type].currentTime = 0;
                sounds[type].play().catch(() => {});
            } catch (e) {}
        }

        function updateScore(points) {
            score += points;
            document.getElementById('score').textContent = score;
            const progress = Math.min((score / 500) * 100, 100);
            document.getElementById('progress').style.width = progress + '%';
        }

        function createCelebration() {
            const celebration = document.getElementById('celebration');
            const emojis = ['🌸', '🌺', '🌻', '🌷', '🌹', '🎉', '🎊', '🏆', '🌟', '✨'];
            
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    const star = document.createElement('div');
                    star.className = 'star';
                    star.textContent = emojis[Math.floor(Math.random() * emojis.length)];
                    star.style.left = Math.random() * 100 + '%';
                    star.style.animationDelay = Math.random() * 2 + 's';
                    celebration.appendChild(star);
                    
                    setTimeout(() => star.remove(), 3000);
                }, i * 100);
            }
        }

        function startGame(gameType) {
            currentGame = gameType;
            document.getElementById('game-selection').style.display = 'none';
            document.getElementById('game-instructions').style.display = 'block';
            document.getElementById('back-btn').style.display = 'inline-block';
            
            switch(gameType) {
                case 'pictogram':
                    document.getElementById('instruction-title').textContent = '🖼️ 象形文字';
                    document.getElementById('instruction-text').textContent = '看图画学汉字，了解汉字的起源和演变！每学一个汉字获得2颗智慧星星！';
                    document.getElementById('character-display').style.display = 'block';
                    document.getElementById('next-btn').style.display = 'inline-block';
                    initPictogramGame();
                    break;
                case 'categories':
                    document.getElementById('instruction-title').textContent = '📚 分类学习';
                    document.getElementById('instruction-text').textContent = '按主题学习常用汉字！点击每个汉字卡片学习，每学一个获得1颗星星！';
                    document.getElementById('category-tabs').style.display = 'flex';
                    document.getElementById('hanzi-grid').style.display = 'grid';
                    initCategoriesGame();
                    break;
                case 'matching':
                    document.getElementById('instruction-title').textContent = '🎯 汉字配对游戏';
                    document.getElementById('instruction-text').textContent = '把汉字和对应的意思连起来！点击一个汉字，再点击对应的意思，配对成功获得5颗星星！';
                    document.getElementById('matching-hanzi').style.display = 'grid';
                    initMatchingGame();
                    break;
                case 'story':
                    document.getElementById('instruction-title').textContent = '📖 汉字故事';
                    document.getElementById('instruction-text').textContent = '通过有趣的故事学习汉字！每学一个汉字获得2颗智慧星星！';
                    document.getElementById('character-display').style.display = 'block';
                    document.getElementById('next-btn').style.display = 'inline-block';
                    initStoryGame();
                    break;
            }
        }

        function initPictogramGame() {
            currentIndex = 0;
            displayCurrentPictogram();
        }

        function initCategoriesGame() {
            displayCategory(currentCategory);
        }

        function initMatchingGame() {
            const hanziPool = document.getElementById('hanzi-pool');
            const meaningPool = document.getElementById('meaning-pool');
            
            hanziPool.innerHTML = '';
            meaningPool.innerHTML = '';
            
            // 随机选择4个汉字进行配对
            const allItems = [];
            Object.values(hanziData).forEach(category => {
                allItems.push(...category);
            });
            
            matchingData = allItems.sort(() => Math.random() - 0.5).slice(0, 4);
            
            // 打乱顺序
            const shuffledHanzi = [...matchingData].sort(() => Math.random() - 0.5);
            const shuffledMeanings = [...matchingData].sort(() => Math.random() - 0.5);
            
            // 创建汉字卡片
            shuffledHanzi.forEach(item => {
                const hanziCard = document.createElement('div');
                hanziCard.className = 'character-card';
                hanziCard.style.background = '#FFE4B5';
                hanziCard.textContent = item.hanzi;
                hanziCard.dataset.meaning = item.meaning;
                hanziCard.dataset.pinyin = item.pinyin;
                hanziCard.onclick = () => handleMatchingClick(hanziCard, 'hanzi');
                hanziPool.appendChild(hanziCard);
            });
            
            // 创建意思卡片
            shuffledMeanings.forEach(item => {
                const meaningCard = document.createElement('div');
                meaningCard.className = 'meaning-card';
                meaningCard.style.background = '#E6FFE6';
                meaningCard.textContent = item.meaning;
                meaningCard.dataset.meaning = item.meaning;
                meaningCard.onclick = () => handleMatchingClick(meaningCard, 'meaning');
                meaningPool.appendChild(meaningCard);
            });
            
            matchedPairs = 0;
        }

        function initStoryGame() {
            currentIndex = 0;
            displayCurrentStory();
        }

        function displayCurrentPictogram() {
            const current = allHanzi[currentIndex % allHanzi.length];
            document.getElementById('current-hanzi').textContent = current.hanzi;
            document.getElementById('current-pinyin').textContent = current.pinyin;
            document.getElementById('current-meaning').textContent = current.meaning;
            document.getElementById('pictogram-evolution').textContent = current.pictogram;
        }

        function displayCurrentStory() {
            const current = hanziData.animals[currentIndex % hanziData.animals.length];
            document.getElementById('current-hanzi').textContent = current.hanzi;
            document.getElementById('current-pinyin').textContent = current.pinyin;
            document.getElementById('current-meaning').textContent = current.story;
            document.getElementById('pictogram-evolution').textContent = current.pictogram;
        }

        function displayCategory(category) {
            const grid = document.getElementById('hanzi-grid');
            grid.innerHTML = '';
            
            hanziData[category].forEach((item, index) => {
                const card = document.createElement('div');
                card.className = 'hanzi-card';
                card.style.background = `hsl(${index * 30}, 70%, 80%)`;
                card.innerHTML = `
                    <div class="pictogram">${item.pictogram}</div>
                    <div class="hanzi">${item.hanzi}</div>
                    <div class="pinyin">${item.pinyin}</div>
                    <div class="meaning">${item.meaning}</div>
                `;
                card.onclick = () => handleHanziClick(item, card);
                grid.appendChild(card);
            });
        }

        function switchCategory(category) {
            currentCategory = category;
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            displayCategory(category);
        }

        function handleHanziClick(item, card) {
            card.classList.add('correct');
            playSound('correct');
            updateScore(1);
            
            setTimeout(() => {
                card.classList.remove('correct');
            }, 1000);
        }

        function handleMatchingClick(card, type) {
            if (card.classList.contains('matched')) return;
            
            // 清除之前的选择样式
            document.querySelectorAll('.character-card, .meaning-card').forEach(c => {
                c.classList.remove('selected');
            });
            
            if (!selectedCard) {
                // 第一次选择
                selectedCard = card;
                card.classList.add('selected');
            } else if (selectedCard === card) {
                // 点击同一个卡片，取消选择
                selectedCard.classList.remove('selected');
                selectedCard = null;
            } else {
                // 第二次选择
                if (selectedCard.dataset.meaning === card.dataset.meaning) {
                    // 配对成功
                    selectedCard.classList.remove('selected');
                    selectedCard.classList.add('matched');
                    card.classList.add('matched');
                    playSound('correct');
                    updateScore(5);
                    matchedPairs++;
                    
                    if (matchedPairs === 4) {
                        setTimeout(() => {
                            alert('🎉 太棒了！你完成了所有配对！获得20颗智慧星星！');
                            createCelebration();
                            initMatchingGame(); // 重新开始新一轮
                        }, 500);
                    }
                } else {
                    // 配对失败
                    selectedCard.classList.add('wrong');
                    card.classList.add('wrong');
                    playSound('wrong');
                    
                    setTimeout(() => {
                        selectedCard.classList.remove('wrong', 'selected');
                        card.classList.remove('wrong');
                    }, 500);
                }
                selectedCard = null;
            }
        }

        function nextCharacter() {
            currentIndex++;
            if (currentGame === 'pictogram') {
                displayCurrentPictogram();
            } else if (currentGame === 'story') {
                displayCurrentStory();
            }
            updateScore(2);
        }

        function backToMenu() {
            document.getElementById('game-selection').style.display = 'block';
            document.getElementById('game-instructions').style.display = 'none';
            document.getElementById('character-display').style.display = 'none';
            document.getElementById('category-tabs').style.display = 'none';
            document.getElementById('hanzi-grid').style.display = 'none';
            document.getElementById('matching-hanzi').style.display = 'none';
            document.getElementById('back-btn').style.display = 'none';
            document.getElementById('next-btn').style.display = 'none';
            currentGame = null;
            matchedPairs = 0;
            selectedCard = null;
            matchingData = [];
        }

        // 添加可爱的动物朋友
        function addAnimalFriends() {
            const animals = ['🐼', '🐨', '🦊', '🐰', '🐻', '🦁', '🐸', '🐵', '🐯', '🦋'];
            const container = document.querySelector('.container');
            
            animals.forEach((animal, index) => {
                const friend = document.createElement('div');
                friend.style.position = 'absolute';
                friend.style.fontSize = '3rem';
                friend.textContent = animal;
                friend.style.left = (5 + index * 9) + '%';
                friend.style.top = (5 + Math.random() * 15) + '%';
                friend.style.animation = `bounce ${2 + index * 0.3}s infinite`;
                container.appendChild(friend);
            });
        }

        // 页面加载完成后添加动物朋友
        window.addEventListener('load', addAnimalFriends);
    </script>
</body>
</html>
